<template>
  <div class="app-container">
    <!-- 查询框 -->
    <div class="filter-container">
      <template>
        <el-tag type="success" style="margin-left: 20px;margin-right: 30px">{{ dep.depName }}</el-tag>
      </template>
      <el-input
        v-model="pageParam.superSearchKeyWord"
        style="width: 200px;"
        placeholder="关键字查询..."
        class="filter-item"
      />
      <!-- <el-select style="width: 140;" v-model="pageParam.orderParams" class="filter-item" placeholder="创建时间">
        <el-option v-for="item in createTimeOrderOptions" :key="item.key" :label="item.label" :value="item.value" />
      </el-select>---11232131----- -->
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-document"
        @click="openCreateWardDialog()"
      >
        添加
      </el-button>

    </div>
    <el-table
      :data="wardList"
      fit
      highlight-current-row
      style="width: 100%;"

    >

      <el-table-column class="filter-item" type="expand">
        <template slot-scope="{row,$index}">
          <el-form id="form123" label-position="left" inline class="demo-table-expand">
            <!-- 行数据详情字段 -->
            <el-form-item label="病床数量">
              <span>{{ row.bedList.length }}</span>
            </el-form-item>

            <el-form-item label="显示病床">
              <el-switch
                v-model="row.bedStatus"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>

            <!--如果select工具没有被调用就不会显示床位状态-->

            <el-col :span="20"  v-show="row.bedStatus">
              <el-card shadow="hover">

                <el-form-item v-for="item in row.bedList" v-if="item.id!=''" :label="item.bedNo">
                  <el-tag v-if="item.bedStatus==0" type="danger">占用</el-tag>
                  <el-tag v-if="item.bedStatus==1" type="success">空置</el-tag>
                  <el-tag v-if="item.bedStatus==2" type="info">维护</el-tag>
                </el-form-item>

              </el-card>
            </el-col>

          </el-form>
        </template>
      </el-table-column>

      <!-- 表格字段 -->

      <el-table-column type="index" label="序号"/>

      <el-table-column prop="wardNo" label="病房编号"/>

      <el-table-column prop="wardType" label="病房类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.wardType==0">普通病房</el-tag>
          <el-tag type="success" v-if="scope.row.wardType==1">高级病房</el-tag>
          <el-tag type="danger" v-if="scope.row.wardType ==2">特护病房</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="wardPrice" label="病房价格"/>

      <el-table-column prop="wardStatus" label="病房状态">

        <template slot-scope="scope">
          <el-tag v-if="scope.row.wardStatus==0" type="danger">住满</el-tag>
          <el-tag v-if="scope.row.wardStatus==1" type="success">空余</el-tag>
          <el-tag v-if="scope.row.wardStatus==2" type="info">维护</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" fit>
        <template slot-scope="{row,$index}">
          <el-button icon="el-icon-edit" type="warning" size="small" @click="editWard(row)">编辑</el-button>
          <el-button icon="el-icon-delete" type="danger" size="small" @click="delWard(row)" v-permission="['admin']">
            删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getListByPage"
    />

    <!-- 病房修改弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :before-close="closeDialog">
      <el-form
        ref="dataForm"
        :model="ward"
        label-position="right"
        label-width="150px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="病房科室">
          <span>{{ dep.depName }}</span>
        </el-form-item>

        <el-form-item label="病房编号">
          <el-input v-model="ward.wardNo"/>
        </el-form-item>

        <el-form-item label="病房单价">
          <el-input v-model="ward.wardPrice"/>
        </el-form-item>

        <el-form-item label="病房类型">
          <template>
            <el-radio v-model="ward.wardType" label="0">普通病房</el-radio>
            <el-radio v-model="ward.wardType" label="1">高级病房</el-radio>
            <el-radio v-model="ward.wardType" label="2">特护病房</el-radio>
          </template>
        </el-form-item>

        <el-form-item label="病房状态">
          <template>
            <el-radio v-model="ward.wardStatus" label="0">满</el-radio>
            <el-radio v-model="ward.wardStatus" label="1">空余</el-radio>
            <el-radio v-model="ward.wardStatus" label="2">维护</el-radio>
          </template>
        </el-form-item>


        <el-form-item v-if="dialogStatus!='create'" label="查看病床">
          <el-switch
            v-model="dialogFormVisible2"
            :change="showBedDetails(dep,ward)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createWard(ward):updateWard(ward)">
          确认
        </el-button>
      </div>
    </el-dialog>

    <!-- 病床修改详情弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible2">
      <div>
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-document"
          @click="createBedDialog()"
        >
          添加
        </el-button>
      </div>
      <template>
        <el-table
          :data="bedList"
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index">
          </el-table-column>
          <el-table-column
            label="床位编号"
            prop="bedNo">
          </el-table-column>
          <el-table-column
            label="床位状态"
            prop="bedStatus">
            <template slot-scope="props">
              <el-tag type="danger" v-if="props.row.bedStatus==0">占用</el-tag>
              <el-tag type="success" v-if="props.row.bedStatus==1">空置</el-tag>
              <el-tag type="info" v-if="props.row.bedStatus==2">维修</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fit width="120px">
            <template slot-scope="{row,$index}">
              <el-button icon="el-icon-edit" :disabled="row.bedStatus==0" type="warning" circle
                         @click="editBed(row)"></el-button>
              <el-button icon="el-icon-delete" :disabled="row.bedStatus==0" type="danger" circle
                         @click="deleteBed(row)" v-permission="['admin','nurse']"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>

    <!-- 病床添加详情弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible3">

      <el-form
        :model="bed"
        label-position="right"
        label-width="150px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="病床编号">
          <el-input v-model="bed.bedNo"></el-input>
        </el-form-item>

        <el-form-item label="病床状态">
          <template>
            <el-radio v-model="bed.bedStatus" value="bed.bedStatus" label="0">满</el-radio>
            <el-radio v-model="bed.bedStatus" value="bed.bedStatus" label="1">空余</el-radio>
            <el-radio v-model="bed.bedStatus" value="bed.bedStatus" label="2">维护</el-radio>
          </template>
        </el-form-item>

      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatus==='create'?dialogFormVisible3 = false:closeUpdateDiglog(bed)">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createBedDetails(bed):updateBedDetails(bed)">
          确认
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// 导入组件 分页 记得声明组件
import Pagination from '@/components/Pagination'
// token管理
import {
  getToken
} from '@/utils/auth'
// 自定义请求方法
import {
  showWardList,
  showWardBedByWardId,
  getBedStatus,
  updateWardInfo,
  insertWardInfo
} from '@/api/ward/ward'

import {mapGetters} from 'vuex'

import {
  getCurrentUserDep
} from '@/api/application/application'

import {
  updateBed,
  insertBed
} from '@/api/bed/bed'

export default {
  name: 'WardIndex',
  components: { // 在这里声明组件
    Pagination
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  data() {
    return {
      headerToken: {
        'Authorization': getToken()
      },
      showBedList: false,
      wardList: [],
      ward: {
        id: '',
        wardNo: '',
        wardType: '',
        wardPrice: '',
        wardStatus: '',
        depId: '',
        isDelete: 0
      },
      ward2: {},
      bedList: [],
      bed: {
        id: '',
        bedNo: '',
        depId: '',
        wardId: '',
        bedStatus: '',
        isDelete: 0
      },
      bedId: '',
      dep: {
        depName: '',
        id: ''
      },
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '创建'
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      total: 0,
      pageParam: {
        pageNum: 1,
        pageSize: 6,
        model: {
          depId: ''
        },
        orderParams: [
          ''
        ],
        superSearchKeyWord: ''
      },
      listQuery: { // 分页 排序  查询参数
        pageNum: 1,
        pageSize: 5
      }
    }
  },
  created() {
    this.getCurrentDep()
    this.getListByPage()
  },
  methods: {
    createBedDetails(obj) {
      obj.wardId = this.ward.id
      obj.depId = this.dep.id
      console.log("11111111111111111111111111")
      console.log(obj)
      insertBed(obj).then(res => {
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 2000
        })
        showWardBedByWardId(obj.wardId).then(res => {
          this.bed = {}
          this.bedList = res.content
        })
        this.dialogStatus = 'update'
        this.dialogFormVisible3 = false
      })
    },
    createBedDialog() {
      this.dialogStatus = 'create'
      this.dialogFormVisible3 = true
    },
    updateBedDetails(obj) {
      updateBed(obj).then(res => {
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 2000
        })
        this.dialogFormVisible3 = false
      })
    },
    closeUpdateDiglog(obj) {
      showWardBedByWardId(obj.wardId).then(res => {
        this.bedList = res.content
      })

      this.dialogFormVisible3 = false
    },
    deleteBed(obj) {
      this.$confirm('此操作将禁用该病床, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        obj.isDelete = 1
        updateBed(obj).then(res => {
          showWardBedByWardId(obj.wardId).then(res => {
            this.bedList = res.content
          })
        })

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })


    },
    editBed(obj) {
      this.dialogStatus = 'update'
      this.dialogFormVisible3 = true

      this.bed = obj
      //console.log("--++=--------------------")
    },
    showBedDetails(obj1, obj2) {
      //console.log(obj1)
      //console.log(obj2)
    },
    delWard(obj) {
      this.$confirm('此操作将禁用该病房, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        obj.isDelete = 1
        updateWardInfo(obj).then(res => {
          this.getCurrentDep()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    createWard(data) {
      this.ward = data
      console.log("111111111111111111")
      console.log(data)
      console.log("111111111111111111")
      console.log("111111111111111111")
      this.ward.isDelete = 0
      console.log(this.ward)

      console.log("111111111111111111")
      insertWardInfo(this.ward).then(res => {
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success',
          duration: 3000
        })
        this.ward = {}
        this.getCurrentDep()
        this.dialogFormVisible = false
      })
    },
    closeDialog() {
      this.getListByPage()
      this.dialogFormVisible = false
    },
    openCreateWardDialog() {
      this.getCurrentDep()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.ward = {}
      this.ward.depId = this.dep.id
    },
    updateWard(obj) {
      this.dialogStatus = 'update'
      updateWardInfo(obj).then(res => {
        this.$notify({
          title: '成功',
          message: '编辑成功',
          type: 'success',
          duration: 3000
        })
        this.dialogFormVisible = false
        this.getListByPage()
        showWardBedByWardId(obj.id).then(res => {
          this.bedList = res.content
        })
        //this.showBedStatus(this.bedId)
      })
    },
    editWard(obj) {
      this.ward.depId = this.dep.id
      showWardBedByWardId(obj.id).then(res => {
        this.bedList = res.content
      })
      this.ward = obj
      this.dialogFormVisible = true
      this.dialogStatus = 'update'
    },
    showBedStatus(row) {
      console.log(row)
      console.log(row.wardStatus)
    },
    showWardDetails(row, rowList) {

      showWardBedByWardId(row.id).then(res => {
        this.bedList = res.content
        //console.log(this.bedList)
        this.bed.bedStatus = ''
        this.bed.bedId = ''
      })
    },
    getCurrentDep() {
      if (this.roles.includes('admin')) {
        return
      }
      getCurrentUserDep().then(res => {
        this.dep = res.content
        this.pageParam.model.depId = this.dep.id
      })
    },
    getListByPage() {
      this.pageParam.pageNum = this.listQuery.pageNum
      this.pageParam.pageSize = this.listQuery.pageSize
      // console.log(this.pageParam.orderParams)
      // 加载申请列表
      showWardList(this.pageParam).then(res => {
        // console.log(res)
        this.wardList = res.content.list
        this.total=res.content.total
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
